.vue-grid-layout {
    width:calc(100% - 10px);
    height:100%;
    background: #fff;
    user-select: none;
  
    .columns {
      columns: 120px;
    }

    .vue-grid-item {
        display: flex;
        justify-content: center;
        align-items: center;

        &.vue-grid-placeholder{
            opacity:.7;
            background:lighten($base-gray-color,35%);
            border-radius:8px;
            border: 3px dotted darken($base-gray-color,15%);
        }

        &:not(.vue-grid-placeholder) {
            background: #fff;
            border: 1px solid lighten($base-gray-color,25%);
            border-radius:8px;
        }

        &.resizing {
            opacity: 0.9;
        }

        &.static {
            background: #cce;
        }

        .text {
            font-size: 24px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 100%;
            width: 100%;
        }

        .no-drag {
            height: 100%;
            width: 100%;
        }

        .minMax {
            font-size: 12px;
        }

        .add {
            cursor: pointer;
        }

    }

    .vue-resizable-handle {
        z-index: 5000;
        position: absolute;
        width: 20px;
        height: 20px;
        bottom: 0;
        right: 0;
        background-position: bottom right;
        padding: 0 3px 3px 0;
        background-repeat: no-repeat;
        background-origin: content-box;
        box-sizing: border-box;
        cursor: se-resize;
    }

    .item-move-handle, .item-remove-handle, .item-refresh-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        color: $base-gray-color;
        z-index:2010;
    }
  
    .item-move-handle {
        position: absolute;
        width: 25px;
        height: 25px;
        top: 4px;
        left: 6px;
        padding: 0 8px 8px 0;
        box-sizing: border-box;
        cursor: move;
    }

    .item-remove-handle {
        position: absolute;
        top: 6px;
        right: 6px;
        cursor:pointer;
        transition: all .2s ease-in-out 0s;

        &:hover {
            color: $base-red-color;
        }

        &:active {
            transform: scale(1.2);
        }

    }

    .item-refresh-handle {
        position: absolute;
        top: 3px;
        left: 45px;
        cursor:pointer;
    }
  }